<script lang="ts" setup>
import {
  watchEffect,
  computed
} from 'vue'
import { PlusIcon, AlertCircleIcon, ChevronDown } from 'lucide-vue-next'
import { Handle, Position, useNode, useVueFlow } from '@vue-flow/core'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import StartInputModule from '../start-input-module.vue'
import type { NodeProps } from '@vue-flow/core'
import { LLMNodeData, LLMNodeEvents } from './index'
import type { Input as InputType } from '../start-input-module.vue'
import commonBasicFormVue from '@/components/vue-flow/common-basic-form.vue'

// import {template,add} from './data/start.json'
import FormItem from '@/components/vue-flow/nodes/formItem.vue'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { Button } from '@/components/ui/button'
import storeMap from '@/pina/index'
import { getChildrenToStartJSONSchema } from '@/lib/toJSONSchema'
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()


const node = useNode()
const startStore = storeMap.useStartStore()

function handleClickAddBtn(data: string) {
  storeMap[data]().add()
  addNodeItem()
}

const addNodeItem = () => {
  node.node.data = {
    //给node节点添加到json当中
    "id": startStore.template.id,
    "type": startStore.template.type,
    ...startStore.template.data
  }
}
const startData = computed(() => {
    startStore.template.data.output.forEach((item: any, index: number) => {
      if (index) item.action = index
    })
    return startStore.template.data
  });

watchEffect(() => {
  if (node.connectedEdges && node.connectedEdges.value.length > 0) {
    addNodeItem()
  }
})

</script>

<template>
  <div class="rounded-sm border border-gray-200 bg-white p-3 shadow-md">
    <div class="flex flex-col gap-y-4">
      <div class="flex justify-between">
        <div class="flex items-center gap-x-2">
          <img src="~@/assets/images/icon_Start.png" class="h-4 w-4" alt="Start icon" />
          <div class="flex flex-col gap-y-1">
            <p class="text-sm text-gray-500">开始</p>
          </div>
        </div>
      </div>

      <span class="text-xs text-gray-400">{{
        startData.description
      }}</span>

      <div class="rounded-md bg-muted p-4">
        <common-basic-form-vue :DLSData="startData" title="输入" storeId="useStartStore" @onClickAddBtn="handleClickAddBtn"
          :nodeType="startStore.template.type">
        </common-basic-form-vue>
      </div>
    </div>
    <Handle type="source" :position="Position.Right" />
  </div>
</template>
